Bootstrap 5 is in alpha when this is written and it’s subject to change.
Bootstrap is a popular UI library for any JavaScript apps.
In this article, we’ll look at how to style tables with Bootstrap 5.
Tables
Bootstrap table styles are opt-in because of the widespread of use of tables in other UI components.
The table styles aren’t inherited in Bootstrap.
So nested tables can be styles independently of the parent.
For example, we can use the table class to style tables.
We can create a simple table by writing:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
</table>
Variants
There are many styling variants for a table.
We can style them with the following classes:
<table class="table-primary">...</table>
<table class="table-secondary">...</table>
<table class="table-success">...</table>
<table class="table-danger">...</table>
<table class="table-warning">...</table>
<table class="table-info">...</table>
<table class="table-light">...</table>
<table class="table-dark">...</table>
They also work on rows:
<tr class="table-primary">...</tr>
<tr class="table-secondary">...</tr>
<tr class="table-success">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-warning">...</tr>
<tr class="table-info">...</tr>
<tr class="table-light">...</tr>
<tr class="table-dark">...</tr>
And they also work on table cells:
<tr>
<td class="table-primary">...</td>
<td class="table-secondary">...</td>
<td class="table-success">...</td>
<td class="table-danger">...</td>
<td class="table-warning">...</td>
<td class="table-info">...</td>
<td class="table-light">...</td>
<td class="table-dark">...</td>
</tr>
Accented Tables
We can add the .table-striped class to add zebra striping to table rows within the tbody .
For example, we can write:
<table class="table table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
</table>
Stripes also work with other table variants:
<table class="table table-dark table-striped">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
</table>
Hoverable Rows
To make rows hoverable, we can add the table-hover class:
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
</table>
Now we see the row that we hovered on highlighted.
The hover effect can be combined with stripes:
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
</table>
Active Tables
We can highlight a table row or cell with the table-active class:
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="table-active">james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
</table>
We add the table-active class on the cell so it’ll be highlighted.
This also works with other variants:
<table class="table table-success">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td class="table-active">james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
</table>
The styling works by setting the background with the --bs-table-bg property.
Then the gradient on the table is added with the background-image: linear-gradient(var( — bs-table-accent-bg), var( — bs-table-accent-bg)); CSS property.
When .table-striped , .table-hover or .table-active classes are added, the --bs-table-accent-bg is set to semitransparent color to change the color of the background.
--bs-table-accent-bg color with the highest contrast is generated for the highlights.
Text and border colors are generated the same way.
Table Borders
We can add borders with the table-bordered class:
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Age</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>james</td>
<td>smith</td>
<td>20</td>
</tr>
<tr>
<th scope="row">2</th>
<td>mary</td>
<td>jones</td>
<td>20</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry</td>
<td>50</td>
</tr>
</tbody>
</table>
Conclusion
We can add tables with various effects like stripes, hover, and various colors.
